<template>
    <div class="integral">
        <nut-tabs v-model="tab" @change="changeTab">
            <nut-tab-pane title="总览">
                <div class="current">
                    <div class="num flex-a"><img style="width: 60rpx;
                    height: 60rpx;" src="https://cxj.szzkba.cn/upload/i/2024/04/10/163817.png" alt=""> <span>￥{{
            rechargeAct.toFixed(2)
        }}</span> </div>
                    <!-- <nut-button type="info" size="small" block style="width: 60%;margin: 0 auto;"
                        @click="apply">申请提现</nut-button> -->
                </div>
                <!-- <div class="add-card flex-a" @click="addCard" v-if="!basicData.id">
                    <div class="left">+</div>
                    <div class="right">
                        <div>添加银行卡</div>
                        <div>贝安数智全力保护你的信息安全</div>
                    </div>
                </div> -->
                <!-- <div class="add-card flex-a flex-b card-bg" v-else>
                    <div class="right flex-a">
                        <div>
                            <nut-avatar bg-color="#ffffff"><img
                                    src="https://cxj.szzkba.cn/up/uploadPath/2023/10/19/3a50df5f76e1b133877516c4e260f4420231019144346.png"
                                    alt=""></nut-avatar>
                        </div>
                        <div class="card">
                            <div class="flex-a"><span>{{ basicData.bankOfDep }}-{{ basicData.cardAddress }}</span>
                            </div>
                            <div>{{ basicData.cardNo }}</div>
                        </div>
                    </div>
                    <div class="icon">
                        <Edit color="#fff" size="14" @click="eidt" />
                    </div>
                </div> -->
            </nut-tab-pane>
            <!-- <nut-tab-pane title="推荐官" v-if="user.role == '201'">
                <div class="flex-a flex-b" style="justify-content: flex-end;">
                    <nut-searchbar v-model="phone" input-background="#F7F7F7" style="width:700rpx" @search="searchOf">
                        <template v-slot:leftin>
                            <Search2 />
                        </template>
</nut-searchbar>
<img style="width:60rpx;height:60rpx" @click="addRole"
    src="https://cxj.szzkba.cn/up/uploadPath/2023/10/26/addOrg20231026103019.png" mode="" alt="">

</div>
<div class="role-list">
    <div class="role-item" v-for="item in roleList" :key="item.id">
        <div class="role-head flex-b flex-a">
            <div class="flex-a">
                <nut-avatar size="small">
                    <img :src="item.introduceSign" />
                </nut-avatar>
                <span>{{ item.nickName }}</span>
                <span class="line"></span>
                <span>{{ item.phone }}</span>
            </div>
            <div><img style="width: 50rpx;height: 50rpx;" @click="unBind(item)"
                    src="https://cxj.szzkba.cn/up/uploadPath/2023/10/26/delte20231026104003.png" alt="">
            </div>
        </div>
    </div>
</div>
</nut-tab-pane> -->
            <!-- <nut-tab-pane title="我的会员" v-if="user.t == 'takerUser'">
                <div class="role-list">
                    <div class="role-item" v-for="item in vipList" :key="item.id">
                        <div class="role-head flex-a">
                            <nut-avatar size="small">
                                <img :src="item.introduceSign" />
                            </nut-avatar>
                            <span>{{ item.nickName }}</span>
                            <span class="line"></span>
                            <span>{{ item.phone }}</span>
                        </div>
                    </div>
                </div>
            </nut-tab-pane> -->
            <nut-tab-pane title="流水明细">
                <div class="flex-a flex-b head">
                    <div>总收入：￥{{ rechargeAct.toFixed(2) }}</div>
                </div>
                <div class="list" v-if="promotionList.length > 0">
                    <div class="item flex-a flex-b" v-for="item in promotionList" :key="item">
                        <div class="left">
                            <div>{{ item.orderNo }}</div>
                        </div>
                        <div class="time">{{ item.createTime.split(' ')[0] }}</div>
                        <!-- <div class="left"> {{ item.state == 2 ? '进行中' : item.state == 4 ? '已完成' :
                            item.state == -1 ? '已取消' : '' }}</div> -->
                        <div class="left"><nut-tag v-if="item.state == 0" type="success"> 已完成 </nut-tag><nut-tag
                                v-if="item.state == -1" color="#E9E9E9" text-color="#999999"> 已取消 </nut-tag></div>
                        <div class="right"><del v-if="item.state == 0">+{{ item.price }}</del><del
                                v-if="item.state == -1" style="color:gray;text-decoration: line-through;">{{ item.price
                                }}</del></div>
                    </div>
                </div>
                <nut-empty description="无数据" v-else></nut-empty>
            </nut-tab-pane>
        </nut-tabs>
        <nut-popup position="bottom" v-model:visible="show">
            <nut-picker v-model="popupValue" :columns="columns" @confirm="popupConfirm" @cancel="show = false">
            </nut-picker>
        </nut-popup>
        <nut-dialog v-model:visible="visible" :no-footer="true">
            <div style="font-weight: bold;font-size: 30rpx;margin-bottom: 20rpx;">请联系客服经理协助办理</div>
            <image style="width:200px;height: 200px;" :src="qrCode">
            </image>
        </nut-dialog>
        <nut-popup position="bottom" v-model:visible="cardShow" closeable round
            :style="{ height: '65%', padding: '70rpx 0 0' }">
            <nut-form>
                <nut-form-item label="姓名">
                    <nut-input v-model="basicData.userName" class="nut-input-text" placeholder="请输入姓名" type="text" />
                </nut-form-item>
                <nut-form-item label="银行卡开户行">
                    <nut-input v-model="basicData.bankOfDep" class="nut-input-text" placeholder="请输入银行卡开户行"
                        type="text" />
                </nut-form-item>
                <nut-form-item label="开户支行">
                    <nut-input v-model="basicData.cardAddress" class="nut-input-text" placeholder="请输入开户支行"
                        type="text" />
                </nut-form-item>
                <nut-form-item label="银行卡卡号">
                    <nut-input v-model="basicData.cardNo" class="nut-input-text" placeholder="请输入银行卡卡号" type="text" />
                </nut-form-item>
                <nut-form-item label="联系电话">
                    <nut-input v-model="basicData.phone" class="nut-input-text" placeholder="请输入联系电话" type="text" />
                </nut-form-item>
                <nut-form-item label="银行卡正面">
                    <nut-uploader :url="uploadUrl" v-model:file-list="fileList" @success="uploadImg" maximum="1">
                    </nut-uploader>
                </nut-form-item>
                <div class="submit"><nut-button type="info" block @click="subApply">提交</nut-button></div>
            </nut-form>
        </nut-popup>
        <nut-popup position="bottom" v-model:visible="roleShow" closeable round
            :style="{ height: '35%', padding: '70rpx 0 0' }">
            <nut-form ref="roleForm" :modelValue="roleData" label-width="100px">
                <nut-form-item label="用户编号" prop="userNo" required :rules="[{ required: true, message: '请输入用户编号' }]">
                    <nut-input v-model="roleData.userNo" class="nut-input-text" placeholder="请输入用户编号" type="text" />
                </nut-form-item>
                <nut-form-item label="手机号" prop="userPhone" required :rules="[{ required: true, message: '请输入手机号' }]">
                    <nut-input v-model="roleData.userPhone" class="nut-input-text" placeholder="请输入手机号" type="text" />
                </nut-form-item>
                <nut-form-item label="备注">
                    <nut-input v-model="roleData.remark" class="nut-input-text" placeholder="请输入备注" type="text" />
                </nut-form-item>
                <div class="submit"><nut-button type="info" block @click="subRole">提交</nut-button></div>
            </nut-form>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom } from '@tarojs/taro';
import { RectDown, Edit, Plus, Search2 } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted, ref } from 'vue';
import { getRecharge, getActRechargeInfo, getActInfo, getBank, postBank, editBank, usersRoleList, listByUser, setRole, deleteUser, getCartList } from '../../../../api/index'
import { uploadUrl } from '../../../../utils'
export default {
    components: {
        RectDown,
        Edit,
        Plus,
        Search2
    },
    setup() {
        const img = ref('')
        const roleForm = ref<any>(null);
        const data = reactive({
            roleShow: false,
            roleData: {
                userNo: '',
                userPhone: '',
                remark: ''
            },
            uploadUrl: uploadUrl,
            rechargeAct: 0,
            tab: 0,
            years: 2023,
            show: false,
            popupDesc: '',
            popupValue: [],
            columns: [
                { text: '2023', value: '2023' },
                { text: '2022', value: '2022' },
                { text: '2021', value: '2021' },
                { text: '2020', value: '2020' },
                { text: '2019', value: '2019' },
            ],
            list: [],
            cardShow: false,
            qrCode: 'https://cxj.szzkba.cn/up/uploadPath/2023/c21eef0bc0826fd2ea0a05d76050a95.jpg',
            visible: false,
            nodata: true,
            changeList: [],
            basicData: {
                id: '',
                userName: '',
                cardNo: '',
                cardAddress: '',
                bankOfDep: '',
                phone: '',
                cardPicture: ''
            },
            promotionList: [],
            fileList: [] as any,
            bordered: false,
            phone: '',
            pageNumber: 1,
            roleList: [],
            vipList: [],
            user: {}
        })
        onMounted(() => {
            getRecharges()
            getActRechargeInfo().then(res => {
                if (res.resultCode == 200) {
                    data.list = res.data
                }
            })
            getBanks()
            getCarts()
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data
                }
            })
        });
        const searchOf = () => {
            data.roleList = []
            getUserRoles()
        }
        const getUserRoles = () => {
            usersRoleList({ pageNumber: data.pageNumber, pageSize: 10, phone: data.phone }).then(res => {
                if (res.resultCode == 200) {
                    res.data.list.forEach(item => {
                        data.roleList.push(item)
                    });
                }
            })
        }
        const validate = (item) => {
            console.log(item);
        };
        const popupConfirm = ({ selectedValue, selectedOptions }) => {
            data.years = selectedOptions.map((val: any) => val.text).join(',');
            data.show = false;
        };
        const getRecharges = () => {
            getRecharge().then(res => {
                if (res.resultCode == 200) {
                    data.rechargeAct = res.data.rechargeAct || 0
                }
            })
        }
        const showPop = () => {
            data.show = true
        }
        const apply = () => {
            if (data.basicData) {
                data.visible = true
            } else {
                Taro.showToast({
                    title: '请添加银行卡',
                    icon: 'error',
                    duration: 2000
                })
            }
        }
        const subApply = () => {
            let params = {
                id: data.basicData.id,
                userName: data.basicData.userName,
                cardNo: data.basicData.cardNo,
                cardAddress: data.basicData.cardAddress,
                bankOfDep: data.basicData.bankOfDep,
                phone: data.basicData.phone,
                cardPicture: img.value,
            }
            if (data.basicData.id) {
                editBank(params).then(res => {
                    if (res.resultCode == 200) {
                        Taro.showToast({
                            title: '修改成功',
                            icon: 'success',
                            duration: 2000
                        })
                        data.cardShow = false
                        getBanks()
                    }
                })
            } else {
                postBank(params).then(res => {
                    if (res.resultCode == 200) {
                        Taro.showToast({
                            title: '添加成功',
                            icon: 'success',
                            duration: 2000
                        })
                        data.cardShow = false
                        getBanks()
                    } else {
                        Taro.showToast({
                            title: res.message,
                            icon: 'error',
                            duration: 2000
                        })
                    }
                })
            }
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const addCard = () => {
            data.cardShow = true
            data.basicData = {
                id: '',
                userName: '',
                cardNo: '',
                cardAddress: '',
                bankOfDep: '',
                phone: '',
                cardPicture: ''
            }
        }
        const eidt = () => {
            data.cardShow = true
        }
        const uploadImg = (data) => {
            console.log(JSON.parse(data.data.data))
            if (JSON.parse(data.data.data).resultCode == 200) {
                img.value = JSON.parse(data.data.data).message
            }
        }
        const getBanks = () => {
            data.fileList = []
            getBank().then(res => {
                if (res.resultCode == 200) {
                    data.basicData = res.data[0] || {}
                    img.value = res.data[0] ? res.data[0].cardPicture : ''
                    data.fileList.push({
                        name: '',
                        url: res.data[0] ? res.data[0].cardPicture : '',
                        status: 'success',
                        message: '上传成功',
                        type: 'image'
                    })
                }
            })
        }
        useReachBottom(() => {
            data.pageNumber++
            if (data.tab == 1) {
                getUserRoles()
            } else if (data.tab == 2) {
                getVipUser()
            }
        })
        const getVipUser = () => {
            listByUser({ pageNumber: data.pageNumber, pageSize: 10 }).then(res => {
                if (res.resultCode == 200) {
                    res.data.list.forEach(item => {
                        data.vipList.push(item)
                    });
                }
            })
        }
        const changeTab = (e) => {
            data.pageNumber = 1
            getCarts()
            if (e.title == '推荐官') {
                data.roleList = []
                getUserRoles()
            } else if (e.title == '我的会员') {
                data.vipList = []
                getVipUser()
            } else if (e.title == '流水明细') {
                // getActInfo().then(res => {
                //     if (res.resultCode == 200) {
                //         data.promotionList = res.data
                //     }
                // })
            }
        }
        const getCarts = () => {
            getCartList().then(res => {
                if (res.code == 200) {
                    data.promotionList = res.rows
                    let total = 0
                    res.rows.forEach(item => {
                        total += parseFloat(item.price)
                    })
                    data.rechargeAct = total
                    // console.log(data.list)
                }
            })
        }
        const addRole = () => {
            data.roleData = {
                userNo: '',
                userPhone: '',
                remark: '',
            }
            data.roleShow = true
        }
        const subRole = () => {
            roleForm.value.validate().then(({ valid, errors }) => {
                if (valid) {
                    setRole(data.roleData.userPhone, data.roleData.userNo, data.roleData.remark).then(res => {
                        if (res.resultCode == 200) {
                            Taro.showToast({
                                title: '添加成功',
                                icon: 'success',
                                duration: 2000
                            })
                            data.roleShow = false
                            getUserRoles()
                        }
                    })
                } else {
                    console.log('error submit!!', errors);
                }
            });
        }
        const unBind = (item) => {
            deleteUser(item.userId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '解绑成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.roleList = []
                    getUserRoles()
                }
            })
        }
        return {
            ...toRefs(data), unBind, searchOf, getRecharges, popupConfirm, showPop, apply, jumpTo, subApply, addCard, uploadImg, getBanks, eidt, changeTab, getVipUser, getUserRoles, subRole, validate, addRole, roleForm, getCarts
        }
    }
};
</script>


<style lang="scss">
.integral {
    background: #fff;
    position: relative;

    .role-list {
        padding: 0 20rpx;
        margin-top: 20rpx;

        .role-item {
            box-shadow: 0 0 10rpx #ccc;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            padding: 10rpx 20rpx;

            .role-head {
                font-size: 26rpx;
                margin-bottom: 10rpx;

                .nut-button {
                    transform: scale(0.8);
                    padding: 4rpx 10rpx !important;
                }

                .line {
                    width: 1rpx;
                    height: 20rpx;
                    background: #ccc;
                    display: inline-block;
                }

                span {
                    margin-right: 10rpx;
                }

                .nut-avatar {
                    transform: scale(0.8);
                    margin-right: 10rpx;
                }
            }

            .role-body {
                font-size: 24rpx;
                padding-bottom: 10rpx;

                span {
                    margin-right: 10rpx;
                    background: #E9F3DA;
                    border-radius: 10rpx;
                    color: #A2B089;
                    padding: 2rpx 6rpx;
                }
            }
        }
    }

    .list {
        padding-top: 50rpx;

        .item {
            border-bottom: 1rpx solid #F9F9F9;
            padding: 20rpx 0;
            font-size: 20rpx;
            color: #000;

            .left {
                span {
                    display: inline-block;
                    font-size: 26rpx;
                }
            }

            .right {

                font-weight: bold;
            }
        }
    }

    .btn {
        width: 60%;
        position: absolute;
        bottom: 10rpx;
        padding-left: 20%;
    }

    .nut-tab-pane {
        padding: 20rpx;
    }

    .current {
        .sub {
            font-size: 32rpx;
            padding: 0 0 30rpx;
        }

        .num {
            font-size: 50rpx;
            text-align: center;
            padding: 100rpx 0;
            justify-content: center;
        }
    }

    .card-bg {
        background: linear-gradient(to bottom, #4982F2, #0555F5) !important;
        color: #fff !important;
        font-size: 30rpx;


        .icon {
            font-weight: normal;
        }

        .nut-avatar {
            position: relative;
            margin-right: 20rpx;
        }

        img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .add-card {
        background: #fff;
        margin: 20rpx auto 0;
        border-radius: 20rpx;
        padding: 20rpx;
        border: 1rpx solid #f9f9f9;
        box-shadow: 0 0 10rpx 10rpx #f9f9f9;
        box-sizing: border-box;

        .left {
            margin-right: 20rpx;
            color: #0B7AFC;
            font-weight: bold;
            font-size: 60rpx;
            padding: 25rpx 40rpx;
            background: #EAF4FE;
            border-radius: 5rpx;
        }

        .right {
            img {
                width: 60rpx;
                height: 60rpx;
            }

            div:first-child {
                font-size: 30rpx;
                margin-bottom: 10rpx;
                font-weight: bold;
            }

            div:last-child {
                font-size: 26rpx;
            }
        }
    }

    .head {
        .left {
            border: 1rpx solid #DDDDDD;
            width: 130rpx;
            padding: 10rpx 8rpx;
            box-sizing: border-box;
            font-size: 26rpx;
        }

        div:last-child {
            font-size: 26rpx;
        }
    }

    .cart-item {
        margin-bottom: 20rpx;
        box-shadow: 0 0 20rpx 20rpx #f9f9f9;
        border-radius: 20rpx;

        .nut-card .nut-card__left {
            width: 160rpx;
            height: 160rpx;

            image {
                width: 80%;
                height: 80%;
                margin: 10%;
            }
        }

        .nut-card .nut-card__right {
            padding: 16rpx 20rpx;
        }

        .nut-card__right__price__origin {
            display: none;
        }
    }

    .cart-item.show {
        .nut-card__right__price__origin {
            display: inline-block;

            view {
                text-decoration: line-through;
            }
        }
    }

    .cart-item.hidden {
        .nut-card__right__price__origin {
            display: none;

            view {
                text-decoration: line-through;
            }
        }
    }

    .submit {
        padding: 30rpx 0;

        .nut-button {
            width: 94%;
            margin: 0 auto;
        }
    }

    /* 修改nut-ui tag的大小 */
    .nut-tag {
        font-size: 14px;
        /* 修改文字大小 */
        padding: 2px 8px;
        /* 修改padding */
        border-radius: 4px;
        /* 可选，修改圆角 */
    }
}
</style>